<template>
 <!-- 我的收藏 -->
  <div class="hot-my-collect">
    <h3 class="hot-title" title="爆品情报系统"><a href="javascript:;">爆品情报系统</a></h3>
    <div class="hot-search-keywords">
      <div class="hot-border-gradient">
        <input type="text" placeholder="请输入关键词" v-model="keywords" @keyup.enter="clickSearch(keywords)">
        <div class="collect-tooltip" v-show="isShowTooltip">
          <EmptyTooltip gradient="orange" triangle="orange" :msg="msg"></EmptyTooltip>
        </div>
      </div>
      <div class="hot-serarch-icon" @click="clickSearch(keywords)">
        <i class="iconfont iconicon-sousu-copy"></i>
      </div>
    </div>
  </div>
</template>

<script>
  // 提示组件
  import EmptyTooltip from '../EmptyTooltip'
  export default {
    components:{EmptyTooltip},
    props:{
      a:{
        type:Array,
        default:() =>{
          return []
        }
      }
    },
    data () {
      return {
        // 关键词
        keywords:"",
        //提示内容
        msg:"请输入关键词哦~",
        //定时器
        timer:null,
        //是否显示输入为空的提示
        isShowTooltip:false
      }
    },
    mounted() {
    },
    methods: {
      clickSearch(keywords) {
        if(!this.keywords){
         console.log('输入为空')
          if(this.timer){this.clearTimer()};
          this.isShowTooltip = true;
          if(this.isShowTooltip){
            this.timer = setInterval(()=>{
              this.isShowTooltip = false;
            },3000)
          }else{
            this.isShowTooltip = false;
            this.clearTimer();
          }
        }else{
          console.log('输入有值');
          this.$emit('sendKeywords',keywords)
        }
      },
      // 清除定时器
      clearTimer() {
        clearInterval(this.timer);
        this.timer = null;
      }
     },
    computed: {
    },
    watch:{
      keywords() {
        if(this.keywords) {
          this.clearTimer();
          this.isShowTooltip = false;
        }
      }
    },
    beforeDestory() {
      this.clearTimer();
    }
  }
</script>

<style scoped>
  /* 我的收藏 */
  .hot-my-collect{
    display:flex;
    align-items: center;
    width:1440px;
    height:100px;
    margin:0 auto;
  }
  @media screen and (max-width:1440px){
    .hot-my-collect{
      width:1200px;
    }
  }
  .hot-my-collect h3{
    margin-right:40px;
  }
  .hot-my-collect h3 a{
    text-indent:-20000px;
    display:block;
    overflow:hidden;
    width:142px;
    height:36px;
    background: url('../../assets/images/hot-my-collect.png') no-repeat center center;
    background-size:contain;
    cursor:pointer;
  }
  .hot-my-collect .hot-search-keywords{
    display:flex;
    align-items: center;
  }
  .hot-my-collect .hot-search-keywords .hot-border-gradient{
    width:338px;
    height:44px;
    padding:3px 0 3px 2px;
    box-sizing:border-box;
    border-radius: 5px 0 0 5px; 
    background-image:linear-gradient(to right, #683b17,#f8a531);
    letter-spacing: 1px;
    position:relative;
  }
  .hot-my-collect .hot-search-keywords .hot-border-gradient input{
    width: 100%;
    height: 100%;
    padding-left:24px;
    box-sizing:border-box;
    background-color:  #151923;
    border-radius: 5px 0 0 5px; 
    font-size:inherit;
    color:#dbdbdc;
    letter-spacing: inherit;
  }
  .hot-my-collect .hot-search-keywords .hot-serarch-icon{
    width:55px;
    height:44px;
    line-height: 40px;
    text-align: center;
    border:3px solid #f8a531;
    border-left:0;
    box-sizing:border-box;
    border-radius:0 5px 5px 0;
    background-image:linear-gradient(225deg,#ff7901,#f7ad3a);
  }
  .hot-my-collect .hot-search-keywords .hot-serarch-icon:hover{
    background-image:linear-gradient(90deg,#ff7901,#f7ad3a);
  }
  .hot-my-collect .hot-search-keywords .hot-serarch-icon i{
    font-size:26px;
    color:#ffffff;
    cursor:pointer;
  }
  .collect-tooltip {
    position: absolute;
    top: 54px;
    left: 33px;
    z-index: 80;
  }
</style>
